<template>
    <div class="shop-header">
      <section>
        <section class="shop-header-top">
          <img src="../../../../static/img/back.png" @touchstart.stop.prevent="back"/>
          <span class="shop-header-title">{{title}}</span>
          <slot name="pic-group">
            <img src="../../../../static/img/hot.png"/>
            <img src="../../../../static/img/shopping_cart.png"/>
            <img src="../../../../static/img/more.png"/>
          </slot>
        </section>
      </section>
    </div>
</template>

<script>
    export default {
      name: "shop-header",
      props: {
        title: {
          type: String,
          default: null
        }
      },
      methods: {
        back () {
          this.$router.go(-1)
        }
      }
    }
</script>

<style scoped>
  .shop-header{

  }
  .shop-header-top{
    height: 90px;/*rem*/
    line-height: 90px;/*rem*/
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 0 0 36px;/*rem*/
    font-size: 32px;/*rem*/
  }
  .shop-header-title{
    flex: 1;
    color: #ffffff;
    text-align: center;
  }
  .shop-header-top img{
    height: 34px;/*rem*/
    width: 34px;/*rem*/
    margin-right: 36px;
  }
</style>
